<template>
  <div class="settingRules">
    <el-card>
      <el-scrollbar wrapClass="scrollbar-wrapper">
        <div class="buttonsBox">
          <el-button size="mini" type="primary" icon="el-icon-tickets" @click="taskSetEvent">任务配置</el-button>
          <el-button size="mini" type="primary" icon="el-icon-download" @click="exportExcelEvent">导出数据至本地</el-button>
          <el-button size="mini" type="primary" icon="el-icon-refresh" @click="refreshEvent">刷新</el-button>
          <!-- <el-button size="mini" type="warning" icon="el-icon-delete-solid">删除</el-button> -->
        </div>
        <!-- <div style="margin-bottom: 20px;">
          <el-button size="small" @click="addTab(editableTabsValue)">add tab</el-button>
        </div>-->
        <div class="tabBox">
          <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
            <el-tab-pane v-for="(item) in editableTabs" :key="item.id" :label="item.ruleName" :name="item.id">
              <znxd-list :column="column" :page="page" :tableData="tableData" @handlePageChange="handlePageChange(page)" :pagination="true"></znxd-list>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-scrollbar>
    </el-card>
  </div>
</template>

<script>
import { getRuleData, getRulesList, delRule, refreshRule, exportData } from "@/api/task/webspider.js";
export default {
  data() {
    return {
      editableTabsValue: "",
      editableTabs: [
        //   {
        //   title: "Tab 1",
        //   name: "1",
        //   content: "Tab 1 content"
        // }, {
        //   title: "Tab 2",
        //   name: "2",
        //   content: "Tab 2 content"
        // }
      ],
      spiderId: null,
      webside: null,
      page: {
        pageNo: 1,
        pageSize: 10,
        total: 0
      },
      tableData: [],
      column: []
    }
  },
  watch: {
    editableTabsValue(val) {
      this.page.pageNo = 1;
      this.getRuleData();
    }
  },
  methods: {
    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }
      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter(tab => tab.name !== targetName);


      this.$confirm("确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let obj = {
            ids: [targetName]
          };
          delRule(obj)
            .then((res) => {
              let data = res.data;
              if (data.success) {
                this.getRulesList();
              } else {
                this.$message({
                  message: data.msg,
                  type: "error"
                });
              }
            })
            .catch(() => {
              // this.$message.error(error);
              this.$message({
                message: "操作失败",
                type: "error"
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    getRulesList() {
      let obj = {
        spiderId: this.spiderId
      };
      getRulesList(obj)
        .then((res) => {
          let data = res.data;
          if (data.success) {
            this.editableTabs = data.data;
            // console.log("this.editableTabsValue", this.editableTabsValue)
            if (this.editableTabsValue !== "" && this.editableTabs.length > 0) {
              this.editableTabsValue = this.editableTabs[this.editableTabs.length - 1].id;
            }
          } else {
            this.$message({
              message: data.msg,
              type: "error"
            });
          }
        })
        .catch(() => {
          // this.$message.error(error);
          this.$message({
            message: "操作失败",
            type: "error"
          });
        });
    },
    getRuleData() {
      if (!this.editableTabsValue || this.editableTabsValue === "0") {
        return;
      }
      let obj = {
        ruleId: this.editableTabsValue,
        ...this.page
      }
      getRuleData(obj)
        .then((res) => {
          let data = res.data;
          if (data.success) {
            this.column = [];
            data.data[0].fieldNames.map(x => {
              let obj = {
                name: x.column,
                label: x.columnText
              }
              this.column.push(obj)
            })
            this.tableData = data.data[0].rows;
            this.page.total = data.data[0].total;
          } else {
            this.$message({
              message: data.msg,
              type: "error"
            });
          }
        })
        .catch(() => {
          // this.$message.error(error);
          this.$message({
            message: "操作失败",
            type: "error"
          });
        });
    },
    handlePageChange(page) {
      this.page = page;
      this.getRuleData();
    },
    refreshEvent() {
      let obj = {
        spiderId: this.spiderId
      };
      refreshRule(obj)
        .then((res) => {
          let data = res.data;
          if (data.success) {
            this.editableTabsValue = 0;
            this.getRulesList();
          } else {
            this.$message({
              message: data.msg,
              type: "error"
            });
          }
        })
        .catch(() => {
          // this.$message.error(error);
          this.$message({
            message: "操作失败",
            type: "error"
          });
        });
    },
    taskSetEvent() {
      this.$router.push({ path: "settingWebSpider", query: { id: this.spiderId } });
    },
    exportExcelEvent() {
      let obj = {
        id: this.spiderId,
        type: "excel"
      }
      exportData(obj);
      // .then((res) => {
      //   let data = res.data;
      //   if (data.success) {
      //     this.getRulesList();
      //   } else {
      //     this.$message({
      //       message: data.msg,
      //       type: "error"
      //     });
      //   }
      // })
      // .catch(() => {
      //   // this.$message.error(error);
      //   this.$message({
      //     message: "操作失败",
      //     type: "error"
      //   });
      // });
    }
  },
  mounted() {
    this.spiderId = this.$route.query.id;
    this.webside = this.$route.query.webside;
    this.getRulesList();
    // window.open(this.webside, "_blank")
  }
}
</script>
<style lang="scss" scoped>
.settingRules {
  .buttonsBox {
    display: flex;
    flex-direction: row;
  }
  .tabBox {
    margin: 20px 0;
  }
}
</style>
